<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>登陆</title>
  <link rel="stylesheet" href="../style.css" />

  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <style>
    .ttt{
      text-align: center;
    }
    .box {
     // margin-left: 1000px;
      width: 470px;
      height: 470px;
      background-image: url("../xk.gif");
      background-repeat: no-repeat;
    }
    #root{
      width: 1000px;
    }
  </style>
  <script>
    window.onload=function(){
      var prev=document.getElementById("prev")
      var next=document.getElementById("next")
      var img=document.getElementsByTagName("img")[0]
      var imgArr=["./image/斗罗大陆.png","./image/斗破苍穹.png","./image/遮天.png","./image/逆天邪神.png"]
      var index=0
      prev.onclick=function(){
        index--
        if(index<0){
          index=imgArr.length-1
        }
        img.src=imgArr[index]
      }
      next.onclick=function(){
        index++
        if(index>imgArr.length-1){
          index=0
        }
        img.src=imgArr[index]
      }
    }
  </script>

</head>

<body >

<div id="app" class="box"    style="background-color: pink; ">
  <center>

      <h1 style="text-align: center">管理员登陆</h1>
      <div class="input-box">
        <label>用户名</label>
        <input type="text"  name="username"  v-model="username"  />
      </div>
      <div class="input-box">
        <label>密码</label>
        <input type="password"  name="password" id="password" v-model="password"/>

      </div>
      <div class="btn-box">
        <a href="#">忘记密码?</a>
        <div>
          <button id="login" @click="login()">登录</button>
          <!--      <a id="regist" href="./zhuce.html" >注册</a>-->
        </div>
      </div>


  </center>
</div>


<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

</body>
<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      username:undefined,
      password:undefined,
    },
    methods:{
      login(){

      if (this.username==null||this.password==null){
        this.$message.error("请输入账号密码");
      }else {
        this.$message.success("登陆成功")
        window.location.href="/xu/pages/students.html"
      }
      }
    }
  })
</script>
</html>